<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="${session.personal.name}+'-|StarFall|'">个人中心</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/set.css" rel="stylesheet">
    <link rel="stylesheet" href="css/font.css">
    <link rel="shortcut icon" href="img/starfall.png" type="image/x-icon">
</head>
<body>
<ul>
    <li th:if="${session.user == null}"><a class="head_set" style="background-color: #555555;opacity: 1" href="/login">前往登录</a></li>
    <li th:if="${session.user != null}"><img th:src="@{'/head_img/'+${session.user.head}}" alt="" class="head head_img"><a class="head_set" href="/set">前往设置</a></li>
    <li><a href="" class="">他的</a></li>
    <li><a href="/topic" class="">前往主题</a></li>
    <li><a href="/home">返回主页</a></li>
</ul>
<div class="square" id="square"></div>
<div class="me page" id="me">
    <div class="content">
        <table class="eleTable">
            <tr>
                <th><span th:text="${session.personal.name}">name</span></th>
                <th class="infTd"><div class="level">&nbsp;&nbsp;<span th:text="'lv:'+${session.personalExp.level}">&nbsp;lv:1</span><span th:text="${session.personalExp.exp}+'/'+${session.personalExp.maxExp}">0/1</span><div class="exp"><div class="expBar"></div></div></div></th>
                <input class="expBarValue" type="hidden" th:value="${session.personalExp.present}">
                <script src="./js/exp.js"></script>
            </tr>
            <tr>
                <td rowspan="5" style="font-size: 20px;"><img style="width: 170px;height: 170px;object-fit: cover;" th:src="@{'/head_img/'+${session.personal.head}}" alt=""></td>
                <td rowspan="5">&nbsp;<textarea disabled th:text="${session.personal.introduce}">介绍inf介绍inf介绍inf介绍inf介绍inf介绍inf介绍inf介绍inf介绍inf介绍inf介绍inf介绍inf介绍inf介绍inf介绍inf介绍inf介绍inf介绍inf</textarea></td>
            </tr>
        </table>
        <br><br>
        <table class="eleTable topic">
            <tr class="tableTop">
                <th style="width: 50px;">图标</th>
                <th class="title">标题</th>
                <th style="width: 80px;"></th>
                <th class="date"></th>
                <th>查看/评论</th>
            </tr>
            <tr class="tableContent" th:each="topic : ${session.personalTopics}">
                <td><img th:src="'./img/topic/icon/'+${topic.icon}" alt="" class="icon"></td>
                <td class="title"><a th:href="'/topic/html?html='+${topic.id}" th:text="${topic.title}">title</a></td>
                <td class="label"><a th:href="'/topic?label='+${topic.labelHref}" th:text="'['+${topic.label}+']'">label</a></td>
                <td class="date"><span th:text="${topic.date.split('-')[0]}">0000</span><br><span th:text="${topic.date.split('-')[1]}+'-'+${topic.date.split('-')[2]}">00-00</span></td>
                <td class="vc"><span th:text="${topic.view}">1</span><span th:text="${topic.comment}">2</span></td>
            </tr>
        </table>
        <div class="topicPage">
            <a th:href="'javascript:'+|pageChange(1,${session.personalTopicPage.getLastPage()},'${session.personal.user}')|" class="back"></a>
            <a th:href="'javascript:'+|pageChange(${session.personalTopicPage.getPage()-1},${session.personalTopicPage.getLastPage()},'${session.personal.user}')|" class="pre"></a>
            <span th:text="${session.personalTopicPage.getPage()}+'/'+${session.personalTopicPage.getLastPage()}">1/2</span>
            <a th:href="'javascript:'+|pageChange(${session.personalTopicPage.getPage()+1},${session.personalTopicPage.getLastPage()},'${session.personal.user}')|" class="next"></a>
            <a th:href="'javascript:'+|pageChange(${session.personalTopicPage.getLastPage()},${session.personalTopicPage.getLastPage()},'${session.personal.user}')|" class="last"></a>
        </div>
    </div>
</div>
</body>
<script src="js/personal.js" type="text/javascript"></script>
</html>